<template>
  <div class="addPic">
    <div class="main">
      <el-form ref="Form" status-icon>
        <div class="lastItem">
          <el-form-item prop="upFile" label="宝贝封面">
            <el-upload
              class="avatar-uploader" 
              :action="handleGetAction('title')"
              name="title"
              :show-file-list="false" 
              :on-success="handleFileSuccess" 
              :before-upload="beforeUpload1" 
              :on-error="handleFileError"
              accept=".jpg,.png"
              >
              <img v-if="titleImg.src" :src="titleImg.src" class="titleImg"/>
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item prop="upFile" label="宝贝照片">
            <el-upload
              class="avatar-uploader" 
              :action="handleGetAction('content')"
              name="content"
              :show-file-list="false" 
              :on-success="handleFileSuccess" 
              :before-upload="beforeUpload2" 
              :on-error="handleFileError"
              multiple
              accept=".jpg,.png"
              list-type="picture"
              >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="contentImgDiv">
              <img v-for="(item,index) in contentImg" :src="item.src" :key="index" class="contentImg">
            </div>
          </el-form-item>
          <el-form-item prop="upFile" label="上传文件">
            <el-upload 
              class="avatar-uploader"
              name="file"
              :action="handleGetAction('file')" 
              :show-file-list="false" 
              :on-success="handleFileSuccess" 
              :before-upload="beforeUpload3" 
              :on-error="handleFileError"
              multiple
              >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="fileTextDiv">
              <p v-for="(item,index) in fileText" :key="index" class="fileText">{{item}}</p>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <div class="buttons">
        <el-popconfirm title="已确定并提交商品吗？" @onConfirm="handleOK" :style="{marginRight: '10px'}">
          <el-button type="primary" slot="reference">确 定</el-button>
        </el-popconfirm>
        <el-popconfirm title="取消将清空数据。" @onConfirm="handleQuit">
          <el-button type="primary" slot="reference">取 消</el-button>
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
import currentAddr from '@/config';
export default {
  name: '',
  components: {},
  inject: ['reloadToShop'],
  props:{
    types: {
      type: String
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      contentImg: state => state.shop.contentImg,
      titleImg: state => state.shop.titleImg,
      fileText: state => state.shop.fileText
    }),
    type_id(){
      switch(this.types){
        case '模板':
          return 1;
        case '组件':
          return 2;
        case '图片':
          return 3;
        case '图标':
          return 4;
        case 'sdk':
          return 5;
      }
      return null;
    }
  },
  data () {
    return {
      Form: {
        des: ''
      },
      Rules: {},
    };
  },
  methods: {
    ...mapMutations({
      handleVisible: 'saveVisible',
      handleFiles: 'clearFiles'
    }),
    ...mapActions(['fetchShopGoods']),
    handleOK(){
      if(this.$route.name === 'Shop'){
        this.fetchShopGoods({ shop_id: this.userInfo.shop_id })
      }
      this.$message({
        type: 'success',
        message: '已成功添加宝贝!',
        showClose: true
      });
      this.handleVisible({visible :false});
    },
    handleQuit(){
      this.handleVisible({visible :false});
      this.handleFiles();
      this.reloadToShop(this.$route.query.shop_id);
    },
    beforeUpload1(FILE){
      const reader = new FileReader();
      reader.readAsDataURL(FILE);
      reader.onload = e => {
        this.titleImg.src = e.target.result;
        this.titleImg.name = FILE.name;
      };
    },
    beforeUpload2(FILE){
      this.contentImg.splice(0,this.contentImg.length);
      const reader = new FileReader();
      reader.readAsDataURL(FILE);
      reader.onload = e => {
        this.contentImg.push({
          src: e.target.result,
          name: FILE.name
        });
      };
    },
    beforeUpload3(FILE){
       this.fileText.splice(0,this.fileText.length);
       this.fileText = [];
       this.fileText.push(FILE.name);
    },
    handleFileSuccess(){
      this.$message({
        type: 'success',
        message: '上传成功',
        showClose: true
      });
    },
    handleFileError(){
      this.$message({
        type: 'error',
        message: '上传失败,请重新上传。',
        showClose: true
      });
    },
    //获取上传文件信息
    handleGetAction(type){
      switch(type){
        case 'title':
          return `/api/setGoodsTitle?shop_id=${this.userInfo.shop_id}&type_id=${this.type_id}`;
        case 'content':
          return `/api/setGoodsContent?shop_id=${this.userInfo.shop_id}&type_id=${this.type_id}`;
        case 'file':
          return `/api/setGoodsFile?shop_id=${this.userInfo.shop_id}&type_id=${this.type_id}`;
      }
    },
  },
}
</script>
<style lang="scss" scoped src="./index.scss"/>
<style lang="scss">
  .addPic{
    .main{
      .el-form{
        .lastItem{
          @include flex-around;
          .el-form-item{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
          }
          .el-form-item:nth-child(1){
            .el-form-item__content{
              .avatar-uploader{
                .el-upload{
                  position: relative;
                  img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
          .el-form-item:nth-child(2){
            .contentImgDiv{
              display: flex;
              flex-direction: column;
              justify-items: center;
              align-items: center;
              .contentImg{
                width: 120px;
                height: 120px;
                border-radius: 8px;
                margin-bottom: 10px;
              }
            }
          }
          .el-form-item:nth-child(3){
            .fileTextDiv{
              .fileText{
                text-align: center;
                width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        
      }
    }
  }
</style>
